<template>
  <div id="dialogiframe-con">
    <el-button @click="open">打开对话框</el-button>
    <h2>来自iframe</h2>
    <div v-if="object">
      <h3>姓名：{{object.name}}</h3>
      <h3>年龄：{{object.age}}</h3>
    </div>
    <el-dialog :visible="dialogShow" :before-close="handleClose" width="60%" title="对话框iframe" v-dialogDrag
      v-dialogDrag:{dialogDrag}=dialog.dialogDrag v-dialogChange:{dialogChange}=dialog.dialogChange
      ref="dialog__wrapper" :close-on-click-modal="false" class="g-dialog">
      <iframe src="#/inner-page" frameborder="0" id="inner" height="100%"></iframe>
      <slot slot="footer" class="dialog-footer">
        <div class="dialog-mouse"></div>
      </slot>
    </el-dialog>
  </div>
</template>
<script>
import $ from 'jquery'
export default {
  data() {
    return {
      dialog: {
        dialogDrag: true, // 可拖拽
        dialogChange: true, // 可拉伸
      },
      dialogShow: false,
      object: null
    }
  },
  created() {
    // ES6
    window.setValue = (cb) => {
      // cb，cackback函数
      this.object = cb()
    }
    // ES5
    var _this = this
    window.close = function (cb) {
      _this.object = cb()
      _this.handleClose()
    }
  },
  methods: {
    open() {
      this.dialogShow = true
    },
    handleClose() {
      this.dialogShow = false
    }
  }
}
</script>
<style lang="scss" scoped>
iframe {
  width: 100%;
  height: 100%;
}
</style>